<template>
    <div class="app-container">
        <div class="header">
            <!-- 招标项目状态为2的时候显示 -->
            <el-steps :active="currentStep" simple style="background: #e8f4ff;">
                <el-step title="招标" icon="el-icon-edit" @click.native="changeStep(0)" />
                <el-step title="投标" icon="el-icon-message" @click.native="changeStep(1)" />
                <el-step title="开标" icon="el-icon-connection" @click.native="changeStep(2)" />
                <el-step title="评标" icon="el-icon-chat-line-square" @click.native="changeStep(3)" />
                <el-step title="定标" icon="el-icon-position" @click.native="changeStep(4)" />
            </el-steps>
        </div>

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name"
                v-if="currentStep === tab.step">
                <component :is="tab.component" v-if="tab.active"></component>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
export default {
    components: {
        'tender-baseInfo': () => import('@/components/tender/baseInfo.vue'),
        'tende-announcement': () => import('@/components/tender/tenderAnnouncement.vue'),
        'tender-attachment': () => import('@/components/tender/tenderAttachment.vue'),
        'bid-getDocument': () => import('@/components/tender/bidGetDocument.vue'),
        'submit-bidDocuments': () => import('@/components/tender/submitBidDocuments.vue'),
        'evaluation-committee': () => import('@/components/tender/evaluationCommittee.vue'),
        'bid-opening': () => import('@/components/tender/bidOpening.vue'),
        'baseInfoid-evaluation': () => import('@/components/tender/bidEvaluation.vue'),
        'candidate': () => import('@/components/tender/candidate.vue'),
        'confirm-bidder': () => import('@/components/tender/confirmBidder.vue'),
        'publicize-bidder': () => import('@/components/tender/publicizeBidder.vue'),
        'advice-dispatch': () => import('@/components/tender/adviceDispatch.vue')
    },
    data() {
        return {
            currentStep: 0,
            activeName: 'first',
            currentTabComponent: 'tender-baseInfo', // 默认加载的组件
            tabs: [
                { label: '招标项目', name: 'first', component: 'tender-baseInfo', step: 0, active: true },
                { label: '招标公告', name: 'second', component: 'tende-announcement', step: 0, active: false },
                { label: '招标文件', name: 'third', component: 'tender-attachment', step: 0, active: false },
                { label: '获取标书', name: 'fourth', component: 'bid-getDocument', step: 1, active: false },
                { label: '投递标书', name: 'fivth', component: 'submit-bidDocuments', step: 1, active: false },
                { label: '组件评标委员会', name: 'sixth', component: 'evaluation-committee', step: 2, active: false },
                { label: '开标', name: 'seventh', component: 'bid-opening', step: 2, active: false },
                { label: '评标', name: 'eighth', component: 'baseInfoid-evaluation', step: 3, active: false },
                { label: '候选人公示', name: 'ninth', component: 'candidate', step: 4, active: false },
                { label: '确定中标人', name: 'tenth', component: 'confirm-bidder', step: 4, active: false },
                { label: '中标结果公示', name: 'eleventh', component: 'publicize-bidder', step: 4, active: false },
                { label: '发送中标通知书', name: 'twelfth', component: 'advice-dispatch', step: 4, active: false }
            ]
        }
    },
    methods: {
        //状态更改查询列表
        changeStep(stepIndex) {
            // if (stepIndex == 0) {
            //     this.currentStep = stepIndex;
            //     this.currentTabComponent = 'tender-baseInfo';
            //     this.activeName = 'first';
            // } else if (stepIndex == 1) {
            //     this.currentStep = stepIndex;
            //     this.currentTabComponent = 'bid-getDocument';
            //     this.activeName = 'fourth'
            // } else if (stepIndex == 2) {
            //     this.currentStep = stepIndex;
            //     this.currentTabComponent = 'evaluation-committee';
            //     this.activeName = 'sixth';
            // } else if (stepIndex == 3) {
            //     this.currentStep = stepIndex;
            //     this.currentTabComponent = 'baseInfoid-evaluation';
            //     this.activeName = 'eighth';
            // } else if (stepIndex == 4) {
            //     this.currentStep = stepIndex;
            //     this.currentTabComponent = 'candidate';
            //     this.activeName = 'ninth';
            // }
            // //这里要改
            // // this.tabs.forEach(tab => {  
            // //     tab.active = (tab.name === active.name);  
            // // });  
            const stepMapping = {
                0: { component: 'tender-baseInfo', activeName: 'first' },
                1: { component: 'bid-getDocument', activeName: 'fourth' },
                2: { component: 'evaluation-committee', activeName: 'sixth' },
                3: { component: 'baseInfoid-evaluation', activeName: 'eighth' },
                4: { component: 'candidate', activeName: 'ninth' }
            };

            if (stepMapping[stepIndex]) {
                this.currentStep = stepIndex;
                this.currentTabComponent = stepMapping[stepIndex].component;
                this.activeName = stepMapping[stepIndex].activeName;
                this.tabs.forEach(tab => {
                    tab.active = (tab.name === this.activeName);
                });
            }
        },
        handleClick(active, old) {
            this.currentTabComponent = active.component;
            this.activeName = active.name;
            this.tabs.forEach(tab => {
                tab.active = (tab.name === active.name);
            });
        },
    },
    mounted() {
        // 从登录页面的公告来的        
        if(this.$route.query.activeName!=null && this.$store.getters.name==null){
            this.activeName=this.$route.query.activeName
            this.$store.dispatch("app/toggleSideBarHide",true);
            // document.querySelector('.navBar').style.display="none";
            // document.querySelector('.tags-view-container').style.display="none";
        }
        if (this.$route.query.flag != null) {
            console.log("进入这个方法");
            // this.currentStep = 2;
            // this.currentTabComponent = 'evaluation-committee'
            // this.activeName = 'sixth';
            this.changeStep(2)
        }
        if (this.$route.query.activeName) {
            this.activeName = this.$route.query.activeName;
            this.currentTabComponent = this.$route.query.currentTabComponent
            this.$nextTick(() => {
                this.handleClick({ name: this.activeName });
            });
        }


    },
}
</script>
<style scoped></style>